<template>
  <div  class="table-box">
  <!--表格-->
  <table border="0" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
      <!--可注释区域（多选）-->
      <th v-show="checkbox" class="first-column" width="10">
        <input
          type="checkbox"
          ref="checkAll"
          @click="checkAllClick()">
      </th>
      <th v-for="(item, index) in tableInfo.title" v-text="item.label" :key="index"></th>
      <th class="last-column" v-text="optionTitle"></th>
    </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableInfo.value" :key = "index">
        <!--可注释区域（单选）-->
        <td v-show="checkbox" class="first-column">
          <input type="checkbox" ref="checked" @click="checkOneClick(index)">
        </td>
        <td v-for="(vItem, vIndex) in tableInfo.title" :key = "vIndex" v-html="item[vItem.value]"></td>
        <td class="last-column" width="150" @click.capture="returnIndex(index)">
          <slot></slot>
        </td>
      </tr>
    </tbody>
  </table>
  <div v-if="tableInfo.value.length === 0" class="isEmpty">
    <hu-empty />
  </div>
  </div>
</template>
<script>
import HuEmpty from '../HuEmpty'
    export default {
        props: {
            value:{
                type:Array,
                default: () => []
            },
            checkbox:{
                type:Boolean,
                default: () => false
            },
            optionTitle: {
                type:String,
                default: () => "操作"
            },
            tableInfo: {
                title: [],
                value: []
            }
        },
        comments:{
          HuEmpty
        },
        data() {
            return {
                isAllChecked: true,
                selectedArr: [],
                checkOneArr: []
            }
        },
        // mounted() {
        //     this.checkOneArr = new Array(this.tableInfo.value.length).fill(true)
        // },
        methods: {
            checkAllClick() {
                if(this.isAllChecked) {
                    for(let i = 0; i < this.tableInfo.value.length; i++) {
                        this.$refs.checked[i].checked = true;
                        this.$set(this.selectedArr,i,i)
                    }
                    this.checkOneArr = new Array(this.tableInfo.value.length).fill(false)
                } else {
                    for(let i = 0; i < this.tableInfo.value.length; i++) {
                        this.$refs.checked[i].checked = false;
                        this.selectedArr.splice(0,1)
                    }
                    this.checkOneArr = new Array(this.tableInfo.value.length).fill(true)
                }
                this.isAllChecked = !this.isAllChecked
                this.emit()
            },
            checkOneClick(index){
                // 当没有选择复选框时，清除 this.checkOneArr[0]
                let  count = 1
                for(let i = 0; i < this.tableInfo.value.length; i++) {
                    if (this.checkOneArr[i] === true && count === this.tableInfo.value.length) {
                        this.selectedArr.splice(0,1)
                        break
                    } else if (this.checkOneArr[i] === true) {
                        count++
                    }
                }

                if (this.checkOneArr[index] || this.checkOneArr[index] == undefined) {
                    this.$set(this.selectedArr,index,index)
                    this.checkOneArr[index] = false
                } else {
                    this.$set(this.selectedArr,index,null)
                    this.checkOneArr[index] = true
                }
                this.emit()
            },
            returnIndex(index) {
                // 初始化相关数据
                this.$refs.checkAll.checked = false;
                for(let i = 0; i < this.tableInfo.value.length; i++) {
                    this.checkOneArr[i] = true
                    this.$refs.checked[i].checked = false;
                    this.$set(this.selectedArr,i,null)
                }

                if(!this.isAllChecked) {
                    this.isAllChecked = !this.isAllChecked
                }
                this.$set(this.selectedArr,0,index)
                this.emit()
            },

            emit() {
                let arr = []
                // 过滤 this.selectedArr 中的 null
                for(let i = 0; i < this.tableInfo.value.length; i++) {
                    if (i < this.selectedArr.length
                        && this.selectedArr[i] !== null
                        && this.selectedArr[i] != undefined
                    ) {
                        arr.push(this.selectedArr[i])
                    }
                }
                this.$emit("input",arr)
            },

            resetChecked() {
              for(let i = 0; i < this.tableInfo.value.length; i++) {
                  this.$refs.checked[i].checked = false;
              }
              this.checkOneArr = new Array(this.tableInfo.value.length).fill(true)
              this.$refs.checkAll.checked = false;
              this.isAllChecked = true;
            }
        }
    }
</script>

<style scoped>
  .table-box {
    width: 100%;
    table-layout: fixed;
  }
  table {
    width: 100%;
    border: 1px solid #2b313e;
    border-collapse:collapse;  /*表格的边框合并，如果相邻，则共用一个边框。*/
    border-spacing:0px;  	   /*设置行与单元格边框的间距。*/
  }
  th {
    user-select: none;
    height: 35px;
    padding: 0 10px;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-align: left;
    border: 1px solid #2b313e;
    color: rgba(255, 255, 255,0.5);
    background-color: #1c222d;
  }
  tr td {
    cursor: default;
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
    letter-spacing: 1.2px;
    border: 1px solid #2b313e;
    color: rgba(255, 255, 255,0.5);
  }
  tr{
    background-color: #222833; /*背景颜色*/
    transition: 0.2s;
  }
  /*table tr:nth-child(even) {  !*odd:奇数、even：偶数*!*/
  /*  background-color: rgb(39, 45, 56);*/
  /*}*/
  table tr:hover {
    background-color: #1c2430;
  }
  .last-column {
    user-select: none;
    text-align: center;
  }
  .last-column span {
    margin-left: 5px;
  }
  table tr td div {
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
  }
  table tr td div:hover {
    color: rgba(255, 255, 255,0.6);
  }

  .first-column input[type=checkbox] {
    width: 12px;
    height: 12px;
    font-size: 12px;
    cursor: pointer;

  }

  .isEmpty{
    position: relative;
    height: 50px;
    width: 100%;
    border: rgba(255, 255, 255,0.05) solid 1px;
  }

  /*整个滚动条*/
  ::-webkit-scrollbar {
    width: 3px;
    height: 0px;
  }
  /*滑块*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
    background: rgba(0, 0, 0, 0.11);
  }
  /*滑块的轨道*/
  ::-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
  }
</style>
